<template>
	<view class="rectificationActiveContent">
		<view class="upper">
			<CommonNavBar :title="title"   :showRobot="true"></CommonNavBar> 
		<!-- 	<view class="step">
				<view v-for="(tabs,index) in stepList" :key="index" @click="stepActive(index)">
					<view :class="{'active': index == tabIndex}">
						{{ tabs.step }}
						<text v-if="index === 0 && rectificationActiveData.length > 0">({{ rectificationActiveData.length }})</text>
					</view>
				</view>
			</view> -->
		</view>
		<scroll-view class="centre" id="problem-content" v-if="tabIndex == 0" :style="{height: contentHeight+ 'px'}" :scroll-y="true" >
			<view class="li" v-for="(rectificationActive,index) in rectificationActiveData" :key="index">
				<view class="title">
					<view class="left">问题项{{ index+1 }}</view>
				</view>
				<view class="box">
					<view class="text">
						<text class="titles">检查项目：</text>
						<text>{{ rectificationActive.STANDARD_NAME }}</text>
					</view>
					<view class="text">
						<text class="titles">序号：</text>
						<text>{{ rectificationActive.CONTENT_NUM }}</text>
					</view>
					<view class="text">
						<text class="titles">检查内容：</text>
						<text>{{ rectificationActive.CHECK_CONTENT }}</text>
					</view>
					<view class="text">
						<text class="titles">评价：</text>
						<text>{{ rectificationActive.SELECTION | resultFilter }}</text>
					</view>
					<view class="text" v-if=" rectificationActive.SELECTION == '2'">
						<text class="titles">问题描述：</text>
						<text>{{ rectificationActive.PROBLEM_CONTENT }} {{rectificationActive.PROBLEM_CONTENT_INPUT}}</text>
					</view>
					<view class="text" v-if=" rectificationActive.SELECTION == '3'">
						<text class="titles">检查说明：</text>
						<text>{{ rectificationActive.MISSING_ITEM_CONTENT }} {{rectificationActive.MISSING_ITEM_CONTENT_INPUT}}</text>
					</view>
					<view class="text " >
						<text class="titles">问题照片：</text>
						<image class="image-view" :src="baseUrl + rectificationActive.PROBLEM_FILE"  v-if=" rectificationActive.SELECTION == '2' && rectificationActive.PROBLEM_FILE != undefined"  @click="lookImageFun(baseUrl + rectificationActive.PROBLEM_FILE)" ></image>
						<!-- <text style="color:#0552A9" v-if=" rectificationActive.SELECTION == '2' && rectificationActive.PROBLEM_FILE != undefined"  @click="lookImageFun(baseUrl + rectificationActive.PROBLEM_FILE)">查看</text> -->
						<text v-else >无</text>
					</view>
					<view class="text "  >
						<text class="titles">整改照片：</text>
						<image class="image-view" :src="baseUrl + rectificationActive.RECTIFICATION_IMAGE"  v-if="rectificationActive.RECTIFICATION_IMAGE != undefined"  @click="lookImageFun(baseUrl + rectificationActive.RECTIFICATION_IMAGE)" ></image>
						<!-- <image class="image-view" v-for="(image,index) in rectificationActive.rectificationImageList" :key="index" :src="baseUrl + image.fileThUrl" v-if=" rectificationActive.SELECTION == '2' && rectificationActive.rectificationImageList != undefined" @click="lookImageFun(baseUrl + image.fileThUrl)"></image> -->
						<view  style="margin-left: 10px;display: flex;justify-content: center;align-items: center;"  v-if="!detail ">
							<image class="add-image" src="@/static/img/addTwo.png" />
							<text style="color:#0552A9"  @click="addItemPhoto(rectificationActive.id,index)">编辑整改照片</text>
						</view>
					</view> 
				</view>
			</view>
		</scroll-view>	
		<!-- <view class="rectificationSituationContent" v-if="tabIndex == 1"> --> 
		<view class="rectificationSituationContent  "  :style="{bottom: !detail ? '120rpx':'0'}"  :class="{'popHeight': showRectificationSituation }"  >
			<view class="centre">
				<view class="li">
					<view class="title">
						<view class="left">整改信息</view>
						<view class="right" @tap="showRectificationSituation = !showRectificationSituation">{{ showRectificationSituation ? '展开' : '关闭'}}</view>
					</view>
					<view class="box">
						<view class="text">整改完成时限：<text>{{ rectificationSituationData.rectificationTimeLimit }}</text></view>
						<view class="text">处理结果：<text>限时整改</text></view>
						<view class="text">检查时间：
							<!-- <text>{{ rectificationSituationData.checkTime }}</text> -->
							<picker mode="date" @change="rectificationTimeClickTwo">
								<view style="width: 500rpx;height:30rpx ">
									<text style="font-size: 19rpx;">
									{{(rectificationSituationData.checkTime == undefined || rectificationSituationData.checkTime == 'undefined') ? '请选择时间' : rectificationSituationData.checkTime}}
									</text>
								</view> 
							</picker>
						</view>
						<view class="text"  >
							核查人员1：
							<!-- <uni-data-select :value="rectificationSituationData.checkPersonnel1" :disabled="detail" :localdata="userList" :clear="false" @change="lawEnforcementOfficialsOne" >
							</uni-data-select> -->
							<text>{{ rectificationSituationData.checkPersonnelName1 }}</text>
						</view>
						<view class="text"  >
							核查人员2： 
							<uni-data-select :value="rectificationSituationData.checkPersonnel2 " :disabled="detail" :localdata="userList" :clear="false" @change="lawEnforcementOfficialsTwo" >
							</uni-data-select>
						</view>
						<view class="text">核查意见：
							<view class="input-container">
								<input type="text" placeholder="请输入"  :disabled="detail" v-model="rectificationSituationData.checkOpinion"
									placeholder-class="placeholder-class" />
							</view>
						</view>
						<view class="text"  v-if="rectificationSituationData.subProcess == 'spxs' || rectificationSituationData.subProcess == 'cyfw' " >是否立案调查：
							<radio-group v-model="rectificationSituationData.transfertofile" @change="transfertofileChange" class="custom-radio-group">
								<label    class="labelRadio " :class="{'yes':rectificationSituationData.transfertofile == '1'  }">
									<radio value="1"  :disabled="detail" :checked="rectificationSituationData.transfertofile == '1' " />
									是
								</label>
								<label    class="labelRadio" :class="{'no':rectificationSituationData.transfertofile == '2' }">
									<radio value="2"  :disabled="detail" :checked="rectificationSituationData.transfertofile == '2' " />
									否
								</label>
							</radio-group>
						</view>
						
						<view class="text">检查结果： 
							<radio-group v-model="rectificationSituationData.checkResult" @change="handleRadioChange" class="custom-radio-group">
								<label
									class="labelRadio" :class="{'yes': (rectificationSituationData.checkResult == '1')}">
									<radio value="1"  :disabled="detail" :checked="rectificationSituationData.checkResult == '1' " />
									通过
								</label> 
								<label
									class="labelRadio" :class="{'no': (rectificationSituationData.checkResult == '2' )}">
									<radio value="2"  :disabled="detail" :checked="rectificationSituationData.checkResult == '2' " />
									不通过
								</label>
							</radio-group>
						</view>
						
						<view class="text" v-if="rectificationSituationData.checkResult == 2">整改时限：
								<picker mode="date" :value="rectificationSituationData.nextRectificationTimeLimit"   @change="confirmRectificationTime">
										<input type="text" placeholder="请选择整改时限"  :disabled="detail" v-model="rectificationSituationData.nextRectificationTimeLimit"
											placeholder-class="placeholder-class" />
								</picker>
						</view>
						<view >
						 	<view class="text photo"  v-if="!detail">整改照片：
								<image src="@/static/img/addTwo.png" />
								<text @click="addPhoto()">编辑整改照片</text>
							</view> 
							<view class="text photo" v-if="detail" >整改照片：
								<uni-icons type="eye-filled" size="30" color="#0552A9" class="photoIcon"></uni-icons>
								<text @click="lookImagesFun()">查看照片</text>
							</view>
						</view>
						 
					</view>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="popupContent"  :style="{paddingBottom: !detail ? '120rpx':'0'}">
					<view class="title">整改照片</view>
					<view class="box">
						<view class="image-list">
							<view v-for="(image, index) in rectificationSituationData.rectificationImageList" :key="index" class="image-item">
								<image :src="baseUrl + image.fileUrl" class="itemImg" @tap="lookImageFun(baseUrl + image.fileUrl)" />
								<image src="../../static/img/delete.png" v-if="!detail" @click="removeImage(image.id,index)" class="delete"></image>
							</view>
							<button @click="chooseImage" v-if="!detail" class="upload"></button>
						</view>
					</view> 
				</view>
			</uni-popup>
		</view>
		<view class="fixed" v-if="!detail">
			<button class="determine" @click="determine('2')">提交</button>
			<button class="cancellation" @click="determine('1')">临时保存</button>
		</view>
		
	</view>
</template>

<script>
	import CommonNavBar from '@/components/CommonNavBar.vue'
	export default {
		components: {
			CommonNavBar
		},
		data() {
			return {
				title: '问题整改', 
				baseUrl:uni.$baseUrl,
				detail: false,
				rectificationId: '',
				tabIndex:0,
				stepList: [{
					step: '问题项',
					active: true
				}, {
					step: '问题整改',
					active: false
				}],
				showRectificationSituation: true,
				contentHeight: 0,
				rectificationHeight: 30 ,
				problem: 2,
				userList: [],
				rectificationActiveData: [],
				rectificationSituationData: {},
				selectedValues: [],
				photoList: false,
				selectedImages: [],
			}
		},
		filters:{
			resultFilter(value){
				if(value == undefined || value  == 'undefined'){
					return '';
				} else if(value  === '1'){
					return '是';
				}  else if(value  === '2'){
					return '否';
				}  else if(value  === '3'){
					return '合理缺项';
				} 
				
			}
		},
		onLoad(options) {
			this.rectificationId = options.rectificationId
			this.detail = options.detail == 'true' ? true :false;
			this.loadData();
		},
		onReady() {
			//获取问题项距离顶部的高度
			uni.createSelectorQuery().in(this).select("#problem-content").fields({rect:true},(res) => {
				this.contentHeight = uni.getSystemInfoSync().windowHeight - res.top
			}).exec();
			
			
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}, 
			stepActive(index) {
				this.tabIndex = index 
			},   
			addItemPhoto(id,index) {
				const that = this;
				uni.chooseImage({
					count:1, 
					success:(e) => {   
						uni.uploadFile({
							url: '/rectification/uploadRectificationItemFile',
							filePath:  e.tempFilePaths[0],
							header:{
								'content-Type': 'multipart/form-data',
							},
							name:'file',
							formData:{
								rectificationItemId : id 
							},
							success: (res) => { 
								const result = JSON.parse(res.data ); 
								if(result.code === 0){
									uni.showToast({
										title:'上传成功',
										icon:'error'
									}) 
									that.$set(that.rectificationActiveData[index],"RECTIFICATION_IMAGE", result.data);
								} else {
									uni.showToast({
										title:'上传失败',
										icon:'error'
									})
								}
							},
							fail : ()=>{
								uni.showToast({
									title:'上传失败',
									icon:'error'
								})
							}
						})
					},
					fail: () => {
						uni.showToast({
							icon:'error',
							title:'图片选择错误'
						})
					}
				})
			},
			lookImageFun(url) { 
				Vue.prototype.$previewImage(url);
			},
			async loadData(){
				//获取详情信息
				try { 
					const res = await uni.$api.getRectificationInfo({
						rectificationId:this.rectificationId
					}); 
					this.rectificationActiveData = res.data.data;
					
					//加载初始化数据
					const res3 = await uni.$api.getRectificationSituation({
						rectificationId:this.rectificationId
					}); 
					if(res3.data.data.checkPersonnel1 != null){
						res3.data.data.checkPersonnel1 = parseInt(res3.data.data.checkPersonnel1);
					}
					if(res3.data.data.checkPersonnel2 != null){
						res3.data.data.checkPersonnel2 = parseInt(res3.data.data.checkPersonnel2);
					}
					this.rectificationSituationData = res3.data.data;
					
					const res2 = await uni.$api.getSupervisePersonList(); 
					this.userList = res2.data.data;
				}  catch (error) {
					console.error(error)
				 
				}
				
			},
			confirmRectificationTime(e) { 
				this.$set(this.rectificationSituationData,'nextRectificationTimeLimit',e.detail.value);
			},
			// 新的整改时限
			rectificationTimeClick(e) { 
				this.$set(this.rectificationSituationData,'nextRectificationTimeLimit',e);
			}, 
			lawEnforcementOfficialsOne(value){
				this.$set(this.rectificationSituationData,"checkPersonnel1",value)
				 
			},
			lawEnforcementOfficialsTwo(value){
				this.$set(this.rectificationSituationData,"checkPersonnel2",value)
				 
			}, 
			transfertofileChange(option) { 
				this.$set(this.rectificationSituationData,"transfertofile",option.target.value)
			}, 
			handleRadioChange(option) { 
				this.$set(this.rectificationSituationData,"checkResult",option.target.value)
			}, 
			async determine(type) {
				const  that = this;
				//保存	
				if(this.rectificationSituationData.checkPersonnel1 == undefined || this.rectificationSituationData.checkPersonnel2 == undefined ){
					uni.showModal({
						icon:'success',
						title: '提示',
						content:'请选择核查人员'
					})
					return ;
				}
				uni.showLoading({
					title:'正在保存，请稍候',
					mask: true
				})
				
				let data = {
					 rectificationId: this.rectificationId, //整改ID（在获取列表接口中有）
					 supervisePersonalId1: this.rectificationSituationData.checkPersonnel1, //核查人员ID1
					 supervisePersonalId2: this.rectificationSituationData.checkPersonnel2, //核查人员ID2 
					 verifyIdea: this.rectificationSituationData.checkOpinion,//核查意见
					 verifyResult: this.rectificationSituationData.checkResult, //核查结果 1-通过；2-不通过
					 transfertofile: this.rectificationSituationData.transfertofile, //是否转为立案 1-是；2-否
					 temporary: type, //是否临时1-是；2-否
					 rectificationTimeLimit: this.rectificationSituationData.rectificationTimeLimit, //整改时限
					 nextRectificationTimeLimit: this.rectificationSituationData.nextRectificationTimeLimit //下次整改时限
				}
				 const res = await uni.$api.saveRectificationInfo(data); 
				uni.hideLoading()
				if(res.data.code == 0){
					uni.showToast({
						icon:'success',
						title: '保存成功'
					})
					const eventChannel = that.getOpenerEventChannel();
					eventChannel.emit('reloadList');
					uni.navigateBack(); 
					/* uni.redirectTo({
						url: '/pages/rectification/rectification'
					}) */
				} else {
					uni.showToast({
						icon: 'error',
						title: '保存失败'
					})
				}
			}, 
			addPhoto() { 
				//显示添加照片 
				this.$refs.popup.open('bottom')
			}, 
			lookImagesFun() { 
				//显示照片 
				this.$refs.popup.open('bottom')
			},
			rectificationTimeClickTwo(e) {
				this.$set(this.rectificationSituationData,'checkTime',e.target.value);
			}, 
			chooseImage() {
				const that = this; 
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量
					success: (fileRes) => {    
						uni.uploadFile({
							url: '/rectification/uploadRectificationFile',
							filePath: fileRes.tempFilePaths[0],
							header:{
								'content-Type': 'multipart/form-data',
							},
							name:'file',
							formData:{
								rectificationId : that.rectificationSituationData.id
							},
							success: (res) => {  
								let  result = JSON.parse(res.data);
								if(result.code == 0){
									uni.showToast({
										title:'上传成功',
										icon:'error'
									})  
									let rectificationImageList = that.rectificationSituationData.rectificationImageList;
									rectificationImageList.push({
										fileUrl:result.data.fileUrl,
										id:result.data.id
									});
									that.$set(that.rectificationSituationData ,'rectificationImageList',rectificationImageList);
								 
								} else {
									uni.showToast({
										title:'上传失败',
										icon:'error'
									})
								}
							},
							fail : (err)=>{
								console.log(err)
								uni.showToast({
									title:'上传失败',
									icon:'error'
								})
							}
						})
					},
				});
			},
			async removeImage(id,index) {
				const that = this;
				const res = await uni.$api.deleteRectificationImage({
					id: id
				}); 
				if(res.data.code == 0){
					const selectedImages = that.rectificationSituationData.rectificationImageList.slice(); // 复制已选中图片的数组
					selectedImages.splice(index, 1); // 删除指定位置的图片
					that.$set(this.rectificationSituationData,"rectificationImageList",selectedImages);
				} else{
					uni.showToast({ 
						title: '删除文件失败'
					})
				}
			},
		},
		watch: {

		},
	}
</script>

<style lang="scss">
	.rectificationActiveContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%; 


			.intelligence {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0%, -50%);
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				
				image {
					width: 75rpx;
					height: 64rpx;
				}
			}
			.step {
				display: flex;
				justify-content: space-around;
				height: 80rpx;
				line-height: 80rpx;
				background: #F9F9F9;

				view {
					position: relative;
					font-size: 25rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					&.active {
						color: #0552A9;

						&::before {
							display: block;
							content: "";
							position: absolute;
							left: 50%;
							bottom: 0%;
							transform: translate(-50%, 0%);
							width: 100rpx;
							height: 5rpx;
							background: #0552A9;
						}
						
						text {
							margin: 0 0 0 10rpx;
						}
					}
				}
			}
		}

		.centre {
			margin: 115rpx 0 0 0;  

			.li {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
				margin: 0 auto 12.5rpx;

				.title {
					height: 73rpx;
					line-height: 73rpx;
					background: #E1EAF4;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-indent: 50rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #002B5B;
				}

				.box {
					padding: 25rpx 50rpx;

					.text {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 auto 13rpx; 
						line-height: 68rpx;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						.titles {
							white-space: nowrap;
						}

						text {
							color: #666666;
						}
						
						text:last-child {
							line-height: 1.6;
						}
						
						.add-image {
							width: 20rpx;
							height: 20rpx;
							margin: 0 6rpx 0 0; 
						}
						
						.image-view {
							width: 120rpx;
							height: 120rpx;
							margin: 0 6rpx 0 0;
							border-radius: 10rpx;
						}
						
						&:nth-child(even) {
							background: #F9F9F9;
						}
						
						&.photo {
							
							text {
								color: #0552A9;
							}
						}
					}
				}
			}
		}
		
		.fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			height: 92rpx;
			background: #fff;
			padding: 0 95rpx 24rpx 95rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			width: calc(100% - 190rpx);
		
			button {
				width: 269rpx;
				height: 55rpx;
				line-height: 55rpx;
				background: #0552A9;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			
				&.determine {
					color: #fff;
				}
			
				&.cancellation {
					background: none;
					border: 1rpx solid #979797;
					color: #979797;
				}
			}
		}
	}
	
	.popHeight{
		height: 185rpx;
		
	}
	
	.rectificationSituationContent { 
		position: fixed; 
		left:0;
		width: 750rpx;
		
		
		.centre {  
	
			.li {
				background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
				margin: 0 auto 12.5rpx;
	
				.title {
					height: 73rpx;
					width: 750rpx;
					line-height: 73rpx;
					background: #00007f;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-indent: 50rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff; 
					border-radius: 14rpx 14rpx 0rpx 0rpx; 
					
					.right{
						margin-right: 20rpx;
						
					}
				}
	
				.box {
					padding: 25rpx 50rpx;
	
					.text {
						font-size: 19rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin: 0 auto 13rpx;
						height: 68rpx;
						line-height: 68rpx;
						display: flex;
						align-items: center;
	
						input {
							font-size: 21rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							width: 460rpx;
							text-indent: 20rpx;
						}
	
						.placeholder-class {
							color: #999999;
						}
	
						.uni-stat__select {
							width: 460rpx;
	
							/deep/.uni-select {
								border: none;
							}
						}
	
						.uni-date {
							width: 460rpx;
	
							/deep/.uni-date-editor--x {
								border: none;
							}
						}
	
						.custom-radio-group {
							display: flex;
	
							.labelRadio {
								display: flex;
								margin: 0 10rpx;
								align-items: center;
							}
	
							/deep/.uni-radio-input {
								width: 20rpx;
								height: 20rpx;
								border: 1rpx solid #979797;
							}
	
							.yes {
	
								/deep/.uni-radio-input {
									background: #07D276 !important;
									border-color: #07D276 !important;
	
									&::before {
										background: #07D276;
										border-radius: 50%;
										font-size: 16rpx;
									}
								}
							}
	
							.no {
	
								/deep/.uni-radio-input {
									background: #FF1F1F !important;
									border-color: #FF1F1F !important;
									position: relative;
	
									&::before {
										content: "";
										position: absolute;
										width: 20rpx;
										height: 4rpx;
										background-color: #fff;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: rotate(45deg) translate(-40%, 120%);
									}
	
									&::after {
										content: "";
										position: absolute;
										width: 20rpx;
										height: 4rpx;
										background-color: #fff;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: rotate(-45deg) translate(-25%, -200%);
									}
								}
							}
						}
	
						text {
							color: #666666;
						}
	
						image {
							width: 21rpx;
							height: 21rpx;
							margin: 0 6rpx 0 0;
						}
	
						&:nth-child(even) {
							background: #F9F9F9;
						}
	
						&.photo {
							
							.photoIcon {
								display: flex;
								align-items: center;
								
								&::before {
									font-size: 30rpx;
								}
							}
	
							text {
								color: #0552A9;
							}
						}
					}
				}
			}
		}
	
		.fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			height: 92rpx;
			background: #fff;
			padding: 0 95rpx 24rpx 95rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			width: calc(100% - 190rpx);
	
			button {
				width: 269rpx;
				height: 55rpx;
				line-height: 55rpx;
				background: #0552A9;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
	
				&.determine {
					color: #fff;
				}
	
				&.cancellation {
					background: none;
					border: 1rpx solid #979797;
					color: #979797;
				}
			}
		}
	
		.popupContent {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			
	
			.title {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background: url('../../static/img/popupProblemTitle.png') no-repeat center center;
				background-size: cover;
				font-size: 25rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-indent: 45rpx;
			}
	
			.box {
				padding: 45rpx 30rpx;
				
				.image-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					
					.image-item {
						position: relative;
						width: 212rpx;
						height: 212rpx;
						overflow: hidden;
						border-radius: 20rpx;
						margin: 0 25rpx 25rpx 0;
						
						&:nth-child(3n) {
							margin: 0 0 25rpx 0;
						}
						
						.itemImg {
							width: 100%;
							border-radius: 20rpx;
						}
						
						.delete {
							position: absolute;
							top: 16rpx;
							right: 16rpx;
							width: 20rpx;
							height: 20rpx;
						}
					}
					
					.upload {
						width: 212rpx;
						height: 212rpx;
						background: url('../../static/img/upload.png') no-repeat center center;
						background-size: cover;
						padding: 0;
						margin: 0;
					}
				}
			}
	
			.button {
				margin: 58rpx auto 0;
				padding: 0 95rpx 24rpx 95rpx;
				display: flex;
	
				button {
					width: 269rpx;
					height: 55rpx;
					line-height: 55rpx;
					background: #0552A9;
					border-radius: 10rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
	
					&.determine {
						color: #fff;
					}
	
					&.cancellation {
						background: none;
						border: 1rpx solid #979797;
						color: #979797;
					}
				}
			}
		}
	}
	.image-view{
		width: 150px;
		height:150px;
		margin-right: 10px;
	}
	/deep/.uni-scroll-view-content {
		height: auto !important;
		padding: 0 0 240rpx 0;
	}
</style>